
// 配置文件

const path = require('path');
//在内存中，根据指定模板，在内存中生成一份首页，同时自动把打包好的bundle.js文件加载到页面底部
//如果配置插件，需要在导出对象中挂载一个plugins节点
//注： 所有的插件都在 plugins中配置
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入vue-loader 插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 当执行命令webpack/webpack-dev-server 的时候 ，命令中没有入口和出口，就会在根目录中查找这个配置文件
module.exports = {
    //入口 配置要打包的文件
    entry: path.join(__dirname,'./src/main.js'),
    output: { // 输出 打包好的文件要存放的  目录 文件名
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [ // 所有的 webpack 插件的配置节点
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'), // 指定模板文件路径
            filename: 'index.html' // 设置生成的内存页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module: { // 配置第三方的匹配规则
        rules: [// 第三方匹配规则
            { test: /\.css$/, use:['style-loader','css-loader']},// 处理 css 文件的 loader
            { test: /\.less$/, use:['style-loader','css-loader','less-loader']},// 处理less文件的loader
            { test: /\.scss$/, use:['style-loader','css-loader','sass-loader']},// 处理less文件的loader
            { test: /\.(jpg|png|gif|bmp|jpeg)$/,use : 'url-loader?limit=7630&name=[hash:8]-[name].[ext]'}, // 处理图片路径的 loader
            { test: /\.(eot|svg|woff|woff2|ttf)$/, use:'url-loader'}, //处理字体的loader
            { test: /\.js$/, use: {loader:'babel-loader'},exclude: /node_modules/},  // 处理ES6高级语法的 loader
            { test: /\.vue$/,use: 'vue-loader'}
        ]
    },
    resolve:{
        alias:{ // 修改Vue 被导入时候的包的路径
            // "vue$":"vue/dist/vue.js"
        }
    }
}